<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>邀请奖励查询</title>
    <jsp:include page="../../include/header.jsp"></jsp:include>
    <style type="text/css">
			table th{
				text-align: center;
	            white-space: nowrap;
	        }
			table td{
				text-align: center;
	            white-space: nowrap;
	        }
		    table{
		         empty-cells:show; 
		         border-collapse: collapse;
		         margin:0 auto;
		    }
 			.col-lg-9 {
			    width: 100%;
			}
			.pcc{
				width: 110px;
				height: 34px;
			}
			input{
				text-indent:10px;
				width: 80%;
				border-radius:5px;
			}
			.search-btnn {
			    float: left;
			     width: 80px; 
			    margin-left: 5px;
			}
		</style>
</head>
<body>
<div id="wrapper" class="row">
		<div class="col-lg-12">
			<h1 class="page-header">邀请奖励查询</h1>
		</div>
	<!-- 搜索框 -->
		<div class="title-top col-lg-9">
			<label class="search-label">会员手机号：</label><input type="text" id="sPhone" value="" placeholder="手机号" class="form-control search-input width200" maxlength="21">
			<label class="search-label">会员卡号：</label><input type="text" id="sCard" value="" placeholder="请输入会员卡号" class="form-control search-input width200" maxlength="21">
		     <%-- <label class="search-label">公司：</label>
		   		<div class="search-input">
	        	<select name="sSeller" id="sSeller" class="form-control" >
	        		<c:if test="${fn:length(sellerList) > 0}">
	        			<option value="">请选择公司</option>
	        			<c:forEach items="${sellerList}" var="seller" varStatus="s">
								<option value="${seller.sellerId }">${seller.sellerName }</option>	
						</c:forEach>
	        		</c:if>
	        	</select>
	        </div>
		    <label class="search-label">分公司：</label>
		    <div class="search-input">
	        	<select name="sStore" id="sStore" class="form-control" >
	        			<option value="">请选择分公司</option>
	        	</select>
	        </div>
		    <label class="search-label">营业部：</label>
		    <div class="search-input">
			    <select name="sDao" id="sDao" class="form-control" >
		        	<option value="">请选择营业部</option>
		        </select>
		    </div> --%>
		    <shiro:hasPermission name="bus:user:doExcel">
					<button onclick="doExcel();"  class="btn btn-success pull-right">导出</button>
				</shiro:hasPermission>
				<div class="clearfix"></div>
			</div>
			<div class="title-top col-lg-12">
				<label class="search-label">日期：</label><input type="text" id="sBeginDate" value="" placeholder="年-月-日" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
				<label class="search-label">至</label><input type="text" id="sEndDate" value="" placeholder="年-月-日" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
		<div class="search-input">
		<label class="search-label">等级：</label>
			<select id="sTaici" class="selectpicker" multiple="multiple" data-width="150">
				<option value="1">会员</option>
				<option value="2">黄金</option>
				<option value="3">白金</option>
				<option value="4">经纪人</option>
				<option value="5">营业部</option>
				<option value="6">分公司</option>
			</select>
			</div>
			<button class="btn btn-success search-btn" onclick="query();">确定</button>
			<button class="btn btn-success search-btn" onclick="reset();">重置</button>
			<div class="clearfix"></div>
		</div>
		<div class="col-lg-12">
			<div class="table-responsive panel panel-default" >
				<table id="dataTable" class="table table-hover table-bordered" style="overflow:scroll;">
		            <thead>
		               	<tr>
							<th width="80px;">会员卡号</th>
							<th width="80px;">会员姓名</th>
							<th width="130px;">会员手机号</th>
							<th width="80px;">等级</th>
							<th width="80px;">消费次数</th>
							<th width="100px;">消费金额</th>
							<th width="100px;">邀请奖励</th>
							<th width="100px;">操作</th>
						</tr>
		            </thead>
		            <tbody id="dataList"></tbody>
		        </table>
			</div>
	        	<div class="col-lg-12">
        			<div class = "pull-right">
	        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
							<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
		    					<option value="10" selected = "selected">10条/页</option>
								<option value="15">15条/页</option>
								<option value="20">20条/页</option>
								<option value="50">50条/页</option>
								<option value="100">100条/页</option>
		    				</select>
						</div>
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
	        	</div>
		</div>
</div>
<jsp:include page="../../include/javascripts.jsp"></jsp:include>
<!-- 异步加载下一页数据后，用模板渲染 -->
<script src="${BASE_PATH}/static/js/PCASClass.js" type="text/javascript"></script>
<script type="text/html" id="dataTpl">
		{{each list as item}}
				 <tr id="item{{item.id}}" data-id="{{item.id}}">
					<td>{{item.card}}</td>
					<td>
						<a href="javascript:showUser('{{item.id}}');"><font color="#40a9ff" id="dataCount">{{if item.name}}{{item.name }}{{/if}}
								{{if !item.name}}--{{/if}}
							</font>
						</a>
					</td>
					<td>{{item.phone}}</td>
					<td>{{item.taici | flagTransform:1,'会员',2,'黄金',3,'白金',4,'经纪人',5,'营业部',6,'分公司',7,'公司'}}</td>
					<td>{{item.countnum}}</td>
					<td>{{item.totalMoney}}</td>
					<td>{{item.totalPoint}}</td>
					<td style="color: #33a6dc;" onclick="showDetail({{item.id}})">详情</td>
				</tr>
		{{/each}}
</script>
<script type="text/javascript">
var dataPaginator;
var DateId='${id}';
$(query);
function query(){
	var pageSize=$("#pageSize").val();
	 var phone=$("#sPhone").val(),card=$("#sCard").val(),sBeginDate=$("#sBeginDate").val(),sEndDate=$("#sEndDate").val();
	 var taici=$("#sTaici").val();
	 var taicis="";
		if(taici !=null && taici !="" && taici !=undefined){
			taicis=taici.join("','");
		}
		
	 var params = {
		pageSize:pageSize,
		phone:phone,
		card:card,
		sBeginDate:sBeginDate,
		sEndDate:sEndDate,
		taici:taicis
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/bus/user/pageRewards",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
}
function reset(){
	$("#sPhone").val("");$("#sCard").val("");$("#sBeginDate").val("");$("#sEndDate").val("")
	$("#sTaici").val("");$("#sTaici").trigger("change");
	$("#sTaici").selectpicker("refresh");
}
var showDialog;
function showUser(id){
	showDialog = Kit.dialog("会员详情信息","${BASE_PATH}/bus/user/detail/"+id,{size:'size-wide',closable:true}).open();
}
function showDetail(id){
	window.location.href="${BASE_PATH}/bus/order/showDetail?id="+id;
}
function onEditSuccess(newObject){
	$("#item"+newObject.id).replaceWith(template("dataTpl",{"list":[newObject]}));
}
function doExcel(){
	 var phone=$("#sPhone").val(),card=$("#sCard").val(),sBeginDate=$("#sBeginDate").val(),sEndDate=$("#sEndDate").val();
	 var taici=$("#sTaici").val(),state=$("#sState").val();

	 var taicis="",states="";
		if(taici !=null && taici !="" && taici !=undefined){
			taicis=taici.join("','");
		}
		if(state !=null && state !="" && state !=undefined){
			states=state.join("','");
		}
	window.location.href="${BASE_PATH}/bus/user/doExcelRewards?phone="+phone+"&card="+card+"&sBeginDate="+sBeginDate+"&sEndDate="+sEndDate+"&taici="+taicis+"&state="+states;
}
//消费次数

$("#sBeginDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    pickerPosition:'bottom-right',
    autoclose:true,
}).on("click",function(){
	var d2=new Date();
	var d=$("#sEndDate").val();
	if(d==""){
		 $("#sBeginDate").datetimepicker("setEndDate",d2);
	}else{
		var d1=new Date(d); 
		d1.setDate(d1.getDate()-1);
		if(d1>d2){
	  	 	 $("#sBeginDate").datetimepicker("setEndDate",d2);
		}else{
			 $("#sBeginDate").datetimepicker("setEndDate",d1);
		}
	}
});
$("#sEndDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    autoclose:true,
	}).on("click",function(){
		var d=$("#sBeginDate").val();
		var d1=new Date(d); 
		d1.setDate(d1.getDate()+1); 
		$("#sEndDate").datetimepicker("setStartDate",d1);
	});
 $(document).on("click","#sEndDate",function(){
    	$('#sEndDate').datetimepicker('show');
    });
$(document).on("click","#sBeginDate",function(){
	$('#sBeginDate').datetimepicker('show');
});
$("#beginDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    pickerPosition:'bottom-right',
    autoclose:true,
}).on("click",function(){
	var d2=new Date();
	var d=$("#endDate").val();
	if(DateId==43){
		$("#beginDate").datetimepicker("setStartDate",'2018-09-01');
	}
	if(d==""){
		 $("#beginDate").datetimepicker("setEndDate",d2);
	}else{
		var d1=new Date(d); 
		d1.setDate(d1.getDate()-1);
		if(d1>d2){
	  	 	 $("#beginDate").datetimepicker("setEndDate",d2);
		}else{
			 $("#beginDate").datetimepicker("setEndDate",d1);
		}
	}
});
$("#endDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    autoclose:true,
	}).on("click",function(){
		var d=$("#beginDate").val();
		var d1=new Date(d); 
		d1.setDate(d1.getDate()+1); 
		$("#endDate").datetimepicker("setStartDate",d1);
	});
 $(document).on("click","#endDate",function(){
    	$('#endDate').datetimepicker('show');
    });

$(document).on("click","#beginDate",function(){
	$('#beginDate').datetimepicker('show');
});
//异步取分公司的值
$("#sSeller").change(function(){
	sSeller=$("#sSeller").val();
	$.ajax({
		type: "POST",
		url: "${BASE_PATH}/bus/user/chooseStore",
		data: {"seller" : sSeller},
		dataType: "json",
		traditional: true,
		success: function(data){
			$("#sStore").empty(); 
			$("#sStore").append("<option value=''>请选择分公司</option>");
			for(var i=0; i<data.object.length;i++){
				$("#sStore").append("<option value='"+data.object[i].storeid+"'>"+data.object[i].title+"</option>");
			}
		}
	});
});
$("#sStore").change(function(){
	sStore=$("#sStore").val();
	$.ajax({
		type: "POST",
		url: "${BASE_PATH}/bus/user/chooseDao",
		data: {"store" : sStore},
		dataType: "json",
		traditional: true,
		success: function(data){
		$("#sDao").empty(); 
		$("#sDao").append("<option value=''>请选择营业部</option>");
			for(var i=0; i<data.object.length;i++){
				$("#sDao").append("<option value='"+data.object[i].trueName+"'>"+data.object[i].trueName+"</option>");
			}
		}
	});
});
</script>
</body>
</html>